<include file="public@header"/>

</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:url('Statistical/index')}">续班分析</a></li>
        <li class="active"><a href="{:url('Statistical/indexclient')}">续班分析</a></li>
    </ul>
    <form class="well form-inline margin-top-20 row" method="post" action="{:url('Statistical/index')}">
        <label for="开始时间" class="col-md-6 col-xs-12 form-group">
            开始时间:
            <input class="form-control" type="text" name="homework_starttime" style="" value="{:input('request.homework_starttime')}"
                   placeholder="年/月/日">
            -
            <input class="form-control" type="text" name="homework_endtime" style="" value="{:input('request.homework_endtime')}"
                   placeholder="年/月/日">
        </label>
        <label class="col-md-3 col-sm-6  form-group" style="margin-bottom:15px">
            所属校区:
            <select class="form-control" name="school_id" id="school_id">
                <option value='0'>全部</option>
                <notempty name="school_data">
                    <volist name="school_data" id="vo">
                        <if condition="isset($param.school_id) && $param.school_id == $vo.id">
                            <option value="{$vo.id}" selected>{$vo.name}</option>
                            <else/>
                            <option value="{$vo.id}">{$vo.name}</option>
                        </if>
                    </volist>
                </notempty>
            </select>
        </label>
        <label class="col-md-3 col-sm-6  form-group" style="margin-bottom:15px">
            课程：
            <select class="form-control" name="course_id" id="course_id">
                <option value="0">全部</option>
                <notempty name="course_data">
                    <volist name="course_data" id="vo">
                        <if condition="isset($param.course_id) && $param.course_id == $vo.id">
                            <option value="{$vo.id}" selected>{$vo.course_name}</option>
                            <else/>
                            <option value="{$vo.id}">{$vo.course_name}</option>
                        </if>
                    </volist>
                </notempty>
            </select>
        </label>
        <label class="col-md-8 col-sm-8  form-group" id="class_id">
                        <if  condition="isset($param.class_id)">
                            <foreach name="data_class" item="vo" key="j">
                                        <if condition="in_array($vo.cid,$param.class_id)">
                                                    <input type="checkbox" name="class_id[]" value="{$vo.cid}" checked />{$vo.cname}
                                            <else/>
                                            <input type="checkbox" name="class_id[]" value="{$vo.cid}" />{$vo.cname}
                                        </if>
                            </foreach>
                            <else/>
                            <!--不存在的时候-->
                            <foreach name="data_class" item="vo" key="j">
                                <input type="checkbox" name="class_id[]" value="{$vo.cid}" />{$vo.cname}
                            </foreach>
                        </if>
        </label>
        <label class="col-md-4 col-sm-4   form-group">
            <input type="submit"  class="btn btn-primary" value="搜索"/>
            <a class="btn btn-danger" href="{:url('Statistical/index')}">清空</a>
        </label>
    </form>
</div>
<!--生成表的地方-->
<div id="main" style="width: 600px;height:400px;" class="center-block"></div>
<!--table-->
<div id="table"  class="row col-lg-8 center-block ">
    <table class="table table-bordered h4 ">
        <tr>
            <th>班级名称</th>
            <th>班级总人数</th>
            <th>续班人数</th>
            <th>班级费用</th>
            <th>续班费用</th>
        </tr>
        <volist name="data_table" id="vo">
            <tr>
                <td class='col-md-3 right-align'>
                    {$vo.cname}
                </td>
                <td>
                    {$vo.num}
                </td>
                <td>
                    {$vo.count}
                </td>
                <td>
                    {$vo.pay_amount}
                </td>
                <td>
                    {$vo.xu_pay_amount}
                </td>
            </tr>
        </volist>
        <tr>
            <td>现有班级总费用</td>
            <td colspan="4">
                {$total_now}
            </td>
        </tr>
        <tr>
            <td>续班班级总费用</td>
            <td colspan="4">
                {$total_xu}
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<script type="text/javascript" src="__STATIC__/js/echarts.js"></script>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<script type="text/javascript">

    $(document).ready(function () {
        //搜索栏根据学校选择班级
        $('#school_id').on('change',function () {
            var sid = $(this).val();
            $course_id=$("#course_id option:selected").val();

            //如果课程和校区都是空的，就是删除班级的
            if(sid == 0 && $course_id==0){
                $('#class_id').empty();
                $('#class_id').html();
                return false;
            }
            $.ajax({
                url:"{:url('classes/Classes/ajax1_class')}",
                type:'post',
                dataType:'json',
                data:{"school_id":sid,'course_id':$course_id},
                success:function(jsonData){
                    $('#class_id').empty();

                    if(jsonData.code == 1){
                        for(var i in jsonData.data){
                            html = '<input type="checkbox" name="class_id[]" value=\"'+jsonData.data[i].id+'\" />'+jsonData.data[i].name;
                            $('#class_id').append(html);

                        }
                    }
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    console.log('xhr='+XMLHttpRequest.readyState+' status='+textStatus+' error='+errorThrown);
                }
            });
        });

        $('#course_id').on('change',function () {
            var $course_id = $(this).val();
            sid=$("#school_id option:selected").val();

            //如果课程和校区都是空的，就是删除班级的
            if(sid == 0 && $course_id==0){
                $('#class_id').empty();
                $('#class_id').html();
                return false;
            }


            $.ajax({
                url:"{:url('classes/Classes/ajax1_class')}",
                type:'post',
                dataType:'json',
                data:{"school_id":sid,'course_id':$course_id},
                success:function(jsonData){
                    $('#class_id').empty();

                    if(jsonData.code == 1){
                        for(var i in jsonData.data){
                            html = '<input type="checkbox" name="class_id[]" value=\"'+jsonData.data[i].id+'\" />'+jsonData.data[i].name;
                            $('#class_id').append(html);
                        }
                    }
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    console.log('xhr='+XMLHttpRequest.readyState+' status='+textStatus+' error='+errorThrown);
                }
            });
        });
    });





    /***************** 统计分析表 ********************/

//    var data=<?php echo $data;?>;
    var data = '{$data}';
    data = JSON.parse(data);//转换为json对象
//    console.log(data);


    bottom_name=[];
    ratio=[];


    for(var i in data)
    {
        bottom_name.push(data[i].cname);
        if(data[i].count===0)
        {
            ratio.push(0);
        }else{
            $ratio=data[i].count;
            ratio.push($ratio);
        }
    }
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '续费分析表',
            x: 'center'
        },
        tooltip: {
            type: 'axis',
            axisPointer:{
                type: 'cross'
            }
        },
        legend: {
            data:['续费率'],
            orient: 'horizontal',
            left: 'left',
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {
                    type:'jpeg',
                    pixelRatio:2
                }
            }
        },
        xAxis: {
            name: '%',
            type: 'value'
        },
        yAxis: {
            name: '班级',
            type: 'category',
            data: bottom_name
        },
        series: [{
            name: '续费率',
            type: 'bar',
            label:{
                normal:{
                    show: true,
                    position: 'right',
                    textStyle:{
                        color: 'blue',
                        fontStyle: 'italic'
                    }
                }
            },
            data: ratio
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    $('[name="homework_starttime"]').datepicker();
    $('[name="homework_endtime"]').datepicker();
    $('#homework_starttime').datepicker();
    $('#homework_endtime').datepicker();


</script>
</body>
</html>